<template>
    <!-- Message||Counsel模块 -->
    <div class="counsel">
        <!-- 按钮 -->
        <div class="btns">
            <el-form size="small" inline  style="float: left; margin-left:40px;">
                <el-form-item label="状态">
                    <!-- v-model="param.status"  按状态查询 -->
                    <el-input v-model="param.status"></el-input>
                    </el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="loadCounsel">搜索</el-button>
            </el-form>
            <el-button type="primary" size="small" style="float:right;margin-right:8px;" @click="downloadHandler">导出</el-button>
        </div>
        
        <!-- /按钮 -->
        <!-- {{counsel}} -->
        <!-- 表格 -->
        <el-table size="small" :data="counsel">
            <el-table-column label="序号" type="index" align="center" width="150px"></el-table-column>
            <el-table-column label="咨询信息">
                <template slot-scope="scope">
                <p>咨询内容: <span>{{scope.row.question}}</span></p>
                <p>咨询时间: <span>{{scope.row.questionTime | fmtDate}}</span></p>
                <p style="color:red;">回复内容: <span>{{scope.row.replay}}</span></p>
                <p style="color:red;">回复时间: <span>{{scope.row.replayTime | fmtDate}}</span></p>
                </template>
            </el-table-column>
            
            <el-table-column label="状态" prop="status" align="center"></el-table-column>

            <el-table-column label="操作" align="center" width="100">
                <!-- 定制 插槽 -->
                <template slot-scope="scope">
                <el-button type="text" size="mini" @click="replyHandler(scope.row)">回复</el-button>
                <el-button type="text" size="mini" @click="deleteHandler(scope.row)">删除</el-button>
                </template>
          </el-table-column>
        </el-table>
        <!-- /表格 -->
        <!-- 模态框 -->
        <el-dialog
            class="customer_modal"
            title="replay"
            :visible.sync="dialogVisible"
            width="60%">
            <!-- {{form}} -->
            <el-form :model="form" label-width="100px">
                <el-form-item label="回复内容" >
                    <el-input type="textarea" v-model="form.replay"></el-input>
                </el-form-item>
                <el-form-item label="状态" >
                    <!-- <el-input v-model="form.status"></el-input> -->
                    <el-radio v-model="form.status" label="未处理">未处理</el-radio>
                    <el-radio v-model="form.status" label="已处理">已处理</el-radio>
                </el-form-item>
            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </span>
            </el-dialog>
    </div>
</template>

<script>
import {get, post, del} from '@/utils/request'

export default {

//部件
 components: {
 },
//静态
 props: {
 },
//对象内部的属性监听，也叫深度监听
 watch: {
 },
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 computed: { 
 },
 data(){
     return{
         //检索的参数
         param:{
             status:""
         },
         //组件模板中需要的数据
         counsel:[],
         form:{},
         list:[],
         dialogVisible:false,
         radio: '1'
     }
 },
//方法表示一个具体的操作，主要书写业务逻辑；
 methods: {
    
    // 保存
    save(){
      let url = "http://39.106.31.187:8888/counsel/saveOrUpdate"
      post(url,this.form).then( (response)=>{
        this.form.status="已处理"
        // 1. 模态框关闭
        this.dialogVisible = false;
        // 2. 提示
        this.$message({type:"success",message:'回复成功'})
        // 3. 刷新
        this.loadCounsel();
      } )
    },

    //回复
    replyHandler(row){
        this.form = row;
        this.dialogVisible = true;
    },

    //导出
    downloadHandler(){
      let url = "http://39.106.31.187:8888/counsel/download"
      if(this.param.status){
        url = "http://39.106.31.187:8888/counsel/download?status="+this.param.status;
      }
      window.location.href = url;
    },

     //跳转
    toAddHandler(){
      this.$router.push("/message/question");
    },
    //查询
    loadCounsel(){
        let url = "http://39.106.31.187:8888/counsel/query"
        get(url, this.param).then(resp => {
            this.counsel = resp.data;
        })
    },
    //删除
    deleteHandler(row){
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/counsel/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadCounsel();
        });
      });
    } 
 },
//请求数据
 created() {
     this.loadCounsel();
},
 mounted() {
}
}
</script>

<style scoped>
    .btns {
        margin: 15px;
    }
    span{
        margin-left: 15px;
    }   
</style>
